<template>
  <q-dialog v-model="innerDialogShow" persistent>
    <q-card style="width: 600px; max-width: 80vw;">
      <q-stepper
          v-model="step"
          vertical
          color="primary"
          animated
      >
        <q-step
            :name="1"
            title="开始创建一个自己专属的个性化工作台"
            icon="settings"
            :done="step > 1"
        >
          <div>Hi~ o(*￣▽￣*)ブ，欢迎小伙伴来体验工作台 🎉 🌹</div>
          <q-separator class="q-my-sm"></q-separator>
          <div>接下来请选择您关注的方向，感兴趣的标签。</div>
          <div>然后快速生成一个聚合自己关注内容的工作台。</div>
          <div>点击下一步按钮便可以继续~</div>
          <q-stepper-navigation>
            <q-btn @click="step = 2" color="primary" label="下一步"/>
            <q-btn @click="skip()" flat color="primary" label="跳过" class="q-ml-sm"/>
            <q-btn @click="skipToLogin()" flat color="primary" label="已有账号直接登录" class="q-ml-sm"/>
          </q-stepper-navigation>
        </q-step>
        <q-step
            :name="2"
            title="选择您的关注方向"
            icon="favorite_border"
            :done="step > 2"
        >
          <div class="q-gutter-sm">
            <q-radio v-for="item in directions"
                     v-model="currentDirection"
                     keep-color
                     :key="item.id"
                     :val="item"
                     :label="item.name"
            ></q-radio>
          </div>
          <q-separator class="q-my-sm"></q-separator>
          <q-stepper-navigation>
            <q-btn @click="step = 3" color="primary" label="我选好了"/>
            <q-btn flat @click="step = 1" color="primary" label="返回" class="q-ml-sm"/>
          </q-stepper-navigation>
        </q-step>
        <q-step
            :name="3"
            title="选择您感兴趣的标签"
            icon="loyalty"
            :done="step > 3"
        >
          <div class="subtitle">您关注的方向：
            <q-chip>{{ currentDirection && currentDirection.name }}</q-chip>
          </div>
          <q-separator class="q-my-sm"></q-separator>
          <div></div>
          <q-option-group
              v-model="selectedTags"
              :options="tagOptions"
              color="green"
              inline
              type="checkbox"
          />
          <q-stepper-navigation>
            <q-btn @click="step = 4" color="primary" label="我选好了"/>
            <q-btn flat @click="step = 2" color="primary" label="返回" class="q-ml-sm"/>
          </q-stepper-navigation>
        </q-step>
        <q-step
            :name="4"
            title="生成个性化工作台面板"
            icon="create_new_folder"
            :done="step > 4"
        >
          <span>你选择如下兴趣标签：</span>
          <q-chip dense v-for="item in selectedTags" :key="item._id">{{ item.name }}</q-chip>
          <div>点击完成，开始生成自己的工作面板吧 🎁</div>
          <q-stepper-navigation>
            <q-btn @click="genWorkbench" color="primary" label="完成"/>
            <q-btn flat @click="step = 3" color="primary" label="返回再选一下" class="q-ml-sm"/>
          </q-stepper-navigation>
        </q-step>
      </q-stepper>
      <q-inner-loading :showing="showLoading"></q-inner-loading>
    </q-card>
  </q-dialog>
</template>

<script>
import dialog from 'src/mixins/form'
import iCommon from '../../api/common'
import iTool from '../../api/tool'

export default {
  name: 'TheQuickBuildPanel',
  mixins: [dialog],
  components: {},
  props: {
    data: Object
  },
  data () {
    return {
      step: 1,
      directions: [],
      currentDirection: null,
      tagOptions: [],
      selectedTags: [],
      showLoading: false
    }
  },
  watch: {
    currentDirection () {
      this.tagOptions = this.currentDirection.tags.map(e => {
        return {
          label: e.name,
          value: e
        }
      })
    }
  },
  async mounted () {
    const directionConfig = await iCommon.systemConfig({
      id: 'WORKBENCH_DIRECTION'
    })
    this.directions = directionConfig.data
  },
  methods: {
    async genWorkbench () {
      this.showLoading = true
      try {
        for (const tag of this.selectedTags) {
          let tools = await iTool.findTools({ tags: tag._id })
          tools = tools.slice(0, 10)
          this.$store.commit('widget/setInitialized')
          await this.$store.dispatch('widget/addAppGroup', {
            apps: tools,
            title: tag.name
          })
        }
        this.innerDialogShow = false
      } finally {
        this.showLoading = false
      }
    },
    skip () {
      this.$store.commit('widget/setInitialized')
      this.innerDialogShow = false
    },
    skipToLogin () {
      this.$router.push({
        name: 'Login'
      })
    }
  }
}
</script>

<style scoped>
</style>
